import React, { Component } from "react";
import {TopicWrapper, TopicItem} from '../style';
import {connect} from 'react-redux';
class Topic extends Component {
    getTopicItem() {
        const {topicList} = this.props;
        return (
            topicList.map(item => {
                return  <TopicItem key={item.get('id')}>
                    <img src={item.get('imgUrl')} alt="" className='topic-pic'/>
                    {item.get('title')}
                </TopicItem>
            })
        )
    }
    render() {
        return (
            <TopicWrapper>
                {this.getTopicItem()}
            </TopicWrapper>
        )
    }
}

const mapState = (state) => {
    return {
        topicList: state.getIn(['home','topicList'])
    }
};

export default connect(mapState)(Topic);